<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-06 20:51:49
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-26 23:23:00
 * @FilePath: /chat-ai-plus/src/components/Conversation/Conversation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <scroll-view
    scroll-y="true"
    class="full border-box scroll-view-show"
    :scroll-top="scrollTop"
    scroll-with-animation="true"
    upper-threshold="300"
    :scroll-into-view="toView"
  >
    <view class="flex container-fluid">
      <view class="row justify-content-center">
        <view class="col-lg-12 col-xl-10 col-xxl-8 p_sm">
          <template
            v-for="(item, index) in conversations"
            :key="item.question.id"
          >
            <MessageUser :data="item.question"></MessageUser>
            <MessageBot
              :question="item.question"
              :data="item.conversations"
              :hasRebuild="conversations.length - 1 === index"
            ></MessageBot>
          </template>

          <view :style="styles"></view>
          <view :id="bottomView" class="bottom-view"></view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>
<script lang="ts">
import {
  computed,
  defineComponent,
  effect,
  nextTick,
  onMounted,
  ref,
  watch,
} from 'vue';
import MessageUser from './MessageUser.vue';
import MessageBot from './MessageBot.vue';
import ModelResponse from './ModelResponse.vue';
import useChatStore from '@/store/modules/chat';
import { onLoad } from '@dcloudio/uni-app';
import { useConversation } from './conversation.hooks';
import emitter from '@/utils/emitter';

export default defineComponent({
  name: 'name',
  components: {
    MessageUser,
    MessageBot,
    ModelResponse,
  },
  setup() {
    const { conversations } = useConversation();
    const scrollTop = ref(0);
    const toView = ref();
    const bottomView = ref('conversation-bottom-view-8357');
    watch(
      () => conversations.value,
      () => {
        console.log('conversations.value')

      
        toView.value = bottomView.value;
        bottomView.value = `conversation-bottom-view-${new Date().getTime()}`;
      }
    );

    const styles = ref({
      paddingBottom: '88px',
    });
    emitter.on('inputChange', (height: number) => {
      nextTick(() => {
        styles.value.paddingBottom = `${height ? height + 22 : 88}px`;
      });
    });

    return {
      conversations,
      scrollTop,
      toView,
      bottomView,
      styles,
    };
  },
});
</script>
<style lang="scss" scoped>
.bottom-view {
  height: 1px;
}

.scroll-view {
  height: 100%;
  border: solid 1px red;
}

.list-container {
  padding-bottom: 80px;
}
</style>
